<!-- Dom模板 -->
<template>
    
  <div class="geren">
    <div class="gerenbox">
          <!-- Dom内容 -->
      <div class="geren_head">
        <p class="iconfont icon-iconfontyoujiantou-zuo" @click="close"></p>
        <h3>个人中心</h3>
      </div>
          
      <div class="gerenbox_list" id="touxiang">
        <p class="left">头像</p>
        <div class="right">
          <img
            :src="tokens?($store.state.login.loginuserMsg.user.user_img !== 'null'?$store.state.login.loginuserMsg.user.user_img:'../../../static/img/touxiang.jpg'):''"
            alt=""
            ref="meimg"
            @click="touxiang"
          />
        </div>
      </div>
      <div class="gerenbox_list">
        <p class="left">账号</p>
        <div class="user_right">
          {{ $store.state.login.loginuser.username }}
        </div>
      </div>
      <div class="gerenbox_list">
        <p class="left">昵称</p>
        <div class="right" @click="nicheng">
          {{ $store.state.login.loginuser.name }}
          <span class="iconfont icon-arrow-right-copy-copy-copy"></span>
        </div>
      </div>
      <div class="gerenbox_list">
        <p class="left">密码</p>
        <div class="right" @click="xiugai">
          <input
            type="password"
            disabled
            id="input"
            :value="$store.state.login.loginuser.password"
          />
          <span class="iconfont icon-arrow-right-copy-copy-copy"></span>
        </div>
      </div>
    </div>
    <div :class="alertFlag ? 'mengceng' : ''" ref="meng"></div>
    <Alert @close="closeAlert()" v-if="alertFlag" :transition="transition">
      <component :is="components"> </component>
    </Alert>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Alert from "../../components/alert/alert.vue";
import { alert_parent } from "../../components/alert/alert_mixin";
import xiugai from "./xiugai.vue";
import nicheng from "./nicheng.vue";
import touxiang from "./touxiang.vue";
export default {
  mixins: [alert_parent],
  data() {
    return {
      msg: "测试",
      transition: {
        to: "",
        from: "",
      },
      components: "",
      userMsg: {
        name: "",
        username: "",
        password: "",
      },
      tokens: sessionStorage.getItem("token")||'',
    };
  }, // 生命周期 - 创建完成（访问当前this实例）
  components: {
    Alert,
    xiugai,
    nicheng,
    touxiang,
  },
  created() {}, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // if (!this.alertFlag) {
    //     // let time = setTimeout(() => {
    //       this.$refs.meng.style.transition= "all 1.2s";
    //       console.log(this.$refs.meng);
    //     // }, 1000);
    //   }
  }, // Vue方法定义
  methods: {
    close() {
      this.$parent.back();
    },
    xiugai() {
      this.components = "xiugai";
      this.transition = {
        to: "right",
        from: "right",
      };
      this.openAlert();
    },
    nicheng() {
      this.components = "nicheng";
      this.transition = {
        to: "right",
        from: "right",
      };
      this.openAlert();
    },
    touxiang() {
      this.components = "touxiang";
      this.transition = {
        to: "bottom",
        from: "bottom",
      };
      this.openAlert();
    },
  },
};
</script>

<style scoped>
@import url("../../../static/fonts/iconfont.css");
/* @import url(); 引入css类 */
.mengceng {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s;
}
.geren {
  width: 100vw;
  height: 100vh;
  background: white;
}
.gerenbox {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.02);
}
.geren_head {
  width: 100%;
  height: 1.466667rem;
  background: #f33a65;
  color: white;
  padding-top: 0.4rem;
  margin-bottom: 0.533333rem;
  position: relative;
}
.geren_head p {
  font-size: 0.746667rem;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  line-height: 1.6rem;
}
.geren_head h3 {
  width: 100%;
  font-size: 0.586667rem;
  line-height: 0.826667rem;
  text-align: center;
}
#touxiang {
  height: 2rem;
  padding-top: 0.213333rem;
}
.gerenbox .gerenbox_list {
  width: 100%;
  height: 1.6rem;
  background-color: white;
  margin-bottom: 0.266667rem;
  box-shadow: 0px 0.053333rem 0.16rem 0rem rgb(0 0 0 / 1%);
}
.gerenbox_list .left {
  width: 2.666667rem;
  height: 100%;
  line-height: 1.6rem;
  margin-left: 0.533333rem;
  float: left;
  font-size: 0.533333rem;
  font-family: "PingFangSC-bold";
}
.gerenbox_list .right {
  width: calc(100vw - 3.2rem);
  line-height: 1.6rem;
  height: 100%;
  float: right;
  text-align: right;
  font-size: 0.48rem;
  position: relative;
}
.gerenbox_list .right input {
  border: none;
  text-align: right;
  background: white;
}
.gerenbox_list .right img {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  margin-right: 0.533333rem;
}
.gerenbox_list .user_right {
  margin-right: 0.533333rem;
  width: calc(100vw - 3.733333rem);
  line-height: 1.6rem;
  height: 100%;
  float: right;
  text-align: right;
  font-size: 0.533333rem;
  position: relative;
}
</style>